<template>
	<!-- 卡片 -->
	<div class="custom-card">
		<div class="custom-card-title">
			<div class="custom-card-title-l">
				<svg-icon icon-class="titleicon" color="#2878B5" className="svgIcon"></svg-icon>
				<h4 class="pl8">{{ props.title }}</h4>
				<slot name="titleOther"></slot>
			</div>
			<slot name="rightTools"></slot>
		</div>
		<slot name="content"></slot>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
	title: String
});
</script>

<style scoped lang="scss">
.custom-card {
	width: 100%;
	height: 100%;
	border-bottom: 1px solid #2878b5;
	.custom-card-title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #0a2335;
		padding: 8px;
		position: relative;
		border-top: 1px solid #13507e;
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			content: "";
			width: 3px;
			height: 2px;
			background-color: #2878b5;
		}
		&::after {
			position: absolute;
			right: 0;
			top: 0;
			content: "";
			width: 3px;
			height: 2px;
			background-color: #2878b5;
		}
		.custom-card-title-l {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #50bbff;
			font-weight: 500;

			flex: 1;
			.svgIcon {
				width: 12px;
				height: 12px;
			}
		}
	}
}
</style>
